<template>
  <div>
    <div class="block">
      <el-cascader
        v-if="editCascaderVisible"
        v-model="selectedOptions"
        :show-all-levels="false"
        ref="sysCascader"
        :size="size"
        :placeholder="placeholder"
        :props="props"
        @change="handleChange"
        style="width: 100%"
        clearable>
      </el-cascader>
    </div>
  </div>
</template>

<script>
  import { listDept } from '../../../api/system/dept'

  export default {
    name: 'Area',
    props: {
      //组件大小
      size: {
        type: String,
        default: 'mini'
      },
      //组件的提示信息
      placeholder: {
        type: String,
        default: '请选择地区'
      },

      //选中区域的值
      value: [String, Object, Array],
    },
    data() {
      let self = this;

      return {

        props: {
          lazy: true,
          checkStrictly: true,
          lazyLoad: this.getLazyLoad
        },

        selectedOptions: this.value,

        editCascaderVisible: false,

        // 地址查询参数
        qParams: {
          pid: null,
          type: null
        },

        //选中的区域信息
        selectAreaInfo: {
          id: '',
          name: ''
        }
      }
    },
    created() {
    },

    methods: {
      //懒加载省份信息到组件中
      getLazyLoad2(node, resolve) {
        setTimeout(() => {
          const { level } = node;
          //查询顶级节点
          if (level == 0) {
            this.qParams.type = 1
            listArea(this.qParams).then(res => {
              const areas = res.rows.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: level >= 2
              }))
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(areas)
            }).catch(err => {
                console.log(err)
              })
          }
          if (level != 0 && level < 5) {
            this.qParams.type = level + 1
            this.qParams.pid = node.value
            listArea(this.qParams).then(res => {
              const areas = res.rows.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: level >= 4
              }))
              resolve(areas)
            }).catch(err => {
                console.log(err)
              })
          } else if (level == 5) {
            //最后一个节点,不去查询了，直接赋值
            const areas = {
              value: node.value,
              label: node.label,
              leaf: level
            }
            resolve(areas)
          }
        }, 10)
      },



//加载树节点  首次加载页面时就会执行一次，之后每选中一个节点也会调用，来渲染下一层
      getLazyLoad(node, resolve) {
        console.log(node);
        // 首次加载时 node为{root:true,level:0}
        // node 节点数据  获取node的level字段的值
        const { level } = node;
        //下一层节点
        const nodes = [];
        //如果有子节点 或者 为根节点（即首次进入level为0）
        //也有人写成 node.level == 0 作用是一样的
        if (node.hasChildren || node.root) {
          // 0 代表第一次请求
          let nodeId = level == 0 ? null : node.value;
          //这里setTimeout的目的是 显示加载动画
          setTimeout(() => {
            this.qParams.pid = nodeId;
            listArea(this.qParams).then(res => {
              const areas = res.rows.map((value, i) => ({
                value: value.id,
                label: value.name,
                leaf: value.isLeaf,
              }))
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(areas)
            }).catch(err => {
              console.log(err)
            })
          }, 1);
        } else {
          //如果没有子节点就不发起请求，直接渲染，也避免了点击叶子节点仍然有加载动画的问题
          resolve(nodes);
        }
      },

      /*改变事件*/
      handleChange(event) {
        let node = this.$refs.sysCascader.getCheckedNodes()[0]
        this.selectAreaInfo.id = node.value;
        this.selectAreaInfo.name = node.label;
        //将该组件中的值传递给父组件
        //getAreaInfo: 是父组件指定的传数据绑定的函数，
        this.$emit('getAreaInfo', this.selectAreaInfo)
      },

    },

    watch: {
      value: {
        handler(val) {
          if(val){
            this.editCascaderVisible = false;
            // 这里搞个定时器重新载入一下组件就可以触发组件拉取数据
            this.selectedOptions = val;
            setTimeout(() => {
              this.editCascaderVisible = true;
            }, 1);
          }else{
            this.selectedOptions = [];
            setTimeout(() => {
              this.editCascaderVisible = true;
            }, 1);
          }
        },
        deep: true,
        immediate: true
      }
    },
  }
</script>

<style scoped>

</style>
